<script setup>
import { ref, onMounted, shallowRef } from "vue";
import CustList from "./list.vue";
const list = ref([
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/1.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/2.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，",
    src: "https://cdn.uviewui.com/uview/album/3.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/4.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，",
    src: "https://cdn.uviewui.com/uview/album/5.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，",
    src: "https://cdn.uviewui.com/uview/album/6.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/7.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最价比",
    src: "https://cdn.uviewui.com/uview/album/8.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，最具性价比",
    src: "https://cdn.uviewui.com/uview/album/9.jpg",
  },
  {
    author: "在下雨天翘班睡觉",
    title: "300多价格里，颜值最高，脚感最好，",
    src: "https://cdn.uviewui.com/uview/album/10.jpg",
  },
]);

const items = shallowRef(null);
const getIndex = (index) => {
  items.value = list.value[index];
};

onMounted(() => {
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push({
        author: "在下雨天翘班睡觉",
        title: "300多价格里，颜值最高，脚感最好，最具性价比",
        src: "https://cdn.uviewui.com/uview/album/8.jpg",
      });
    }
  }, 2000);
});
</script>
<template>
  <CustList :list="list" @getIndex="getIndex">
    <div
      :style="{
        'white-space': items.title.length > 20 ? 'nowrap' : 'normal',
        'max-height': ' 100rpx',
        'text-overflow': 'ellipsis',
        overflow: 'hidden',
      }"
    >
      {{ items ? items.title : "" }}
    </div>
    <div
      style="
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        font-size: small;
      "
    >
      <u-icon name="account" size="25"></u-icon>
      {{ items ? items.author : "" }}
      <u-icon name="thumb-up" size="25"></u-icon>7
    </div>
  </CustList>
</template>
<style scoped lang="scss">
.video {
  height: calc(100vh - 60rpx);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  transition: 0.5s;

  div {
    width: 100%;
    background-color: #030303;
    min-height: calc(100vh - 60rpx);
    display: flex;
    align-items: center;
    transition: 0.5s;
    .video-player {
      object-fit: contain;
      width: 100%;
      height: 85%;
    }
  }
}
</style>